<template>
  <div class="card-wrapper" v-loading="loading">
    <div class="card-top-wrapper">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>水卡管理</el-breadcrumb-item>
        <el-breadcrumb-item>普通水卡</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/cardexamine' }">线上实体卡申请记录</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>


    <div class="card-user-wrapper">
      <div class="header-title">
        <el-icon class="el-icon-postcard"></el-icon>
        <span>用户信息</span>
      </div>
      <div class="base-user">
        <div class="user-row">
          <span>姓名：{{card.full_name || '--'}}</span>
          <span>身份证号：{{card.IDcard || '--'}}</span>
          <span>手机号码：{{card.tel || '--'}}</span>
          <span>申请时间：{{card.apply_time || '--'}}</span>
        </div>
        <div class="user-row">
          <span>园区名称：{{card.village_name || '--'}}</span>
          <span>地址：{{card.address || '--'}}</span>
        </div>
      </div>
    </div>
    
    <div class="card-user-wrapper">
      <div class="header-title">
        <el-icon class="el-icon-bank-card"></el-icon>
        <span>水卡信息</span>
      </div>
      <div class="base-user">
        <div class="user-row">
          <span>水卡号：{{card.card_number || '--'}}</span>
          <span>水卡类型：{{card.card_type || '--'}}</span>
          <span>充值金额：{{card.recharge_money || '--'}}元</span>
          <span>押金：{{card.card_deposit || '--'}}元</span>
        </div>
        <div class="user-row">
          <span>审核状态：{{card.audit_status || '--'}}</span>
          <span>备注：{{card.audit_note || '--'}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'checkcard',
    data: function () {
      return {
        loading:false,
        card: {
          audit_data: []
        },//水卡信息
      }
    },

    inject: ['reload'],
    methods: {

      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload()
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },


      getCardInfo() {
        this.loading = true;
        this.$post({
          url: 'Partner/WaterCard/getAccountWaterCardAudit',
          data: {
            id: this.$route.query.id
          },
          success: res => {
            this.loading = false;
            if (res.code > 0) {
              this.card = res.data;
            } else {
              this.$message.error(res.message);
            }
          }, error: e => {
            this.loading = false;
            this.$message.error("网络错误");
          }
        })
      }
    },
    mounted() {
this.getCardInfo();
    },
    
  }
</script>

<style scoped>
  .card-wrapper {
    /* position: absolute; */
    background: #FAFAFA;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }

  .card-top-wrapper {
    background: #fff;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 22px;
    position: relative;
  }

  .card-top-wrapper::after {
    border-bottom: 1px #CCCDCD solid;
    position: absolute;
    width: 98%;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
  }

  .header-title {
    color: #2C5585;
    padding: 20px 0 10px 18px;
    position: relative;
  }

  .header-title span {
    display: inline-block;
  }

  .header-title::after {
    position: absolute;
    content: "";
    width: 95%;
    border-bottom: 1px dotted #F2F2F2;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
  }

  .card-user-wrapper {
    background: #fff;
    margin-top: 15px;
  }

  .search-wrapper {
    padding: 15px 30px 20px;
    display: flex;
    width: 400px;
  }

  .base-user {
    padding: 10px 30px 30px 30px;
    color: #4C4C4C;
    font-size: 14px;
  }

  .user-row {
    display: flex;
    margin-top: 20px;
  }

  .user-row span {
    display: inline;
    min-width: 22%;
    margin-right: 20px;
  }


  .user-pic-group {
    display: flex;
  }

  .user-pic {
    width: 240px;
    height: 200px;
  }

  .mr-15 {
    margin-right: 15px;
  }

  .card-info {
    display: flex;
    padding: 30px;
    color: #4C4C4C;
    font-size: 14px;
  }

  .card-info span {
    flex: 1;
    text-align: left;
  }

  .btn-wrapper {
    background: #fff;
    padding: 20px 30px;
    margin-top: 10px;
  }

  .audit-btn {
    background: #2C5586;
  }
</style>